<template>
	<view>
		<u-sticky>
			<view class="search-panel">
				<!-- 检索框 -->
				<view class="search-panel-base">
					<view class="left">
						<image :src="sarchIcon" class="search-icon"></image>
						<input class="search-input" v-model="keyword" type="text" :placeholder="placeholder" />
						<image v-if="keyword" :src="delIcon1" class="search-del-icon" @click="clearKeyword"></image>
					</view>
					<view class="right">
						<text class="search-btn" @click="search" :style="'border: 1rpx solid ' + borderColor + ';color: ' + textColor + ';'">
							{{ searchName ? searchName : '搜索' }}
						</text>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="info_box">
			<list-item :dataList="dataList"></list-item>
		</view>
	</view>
</template>

<script>
import ListItem from '../datapage/statemMonitor/list-item.vue';
export default {
	components: {
		ListItem
	},
	data() {
		return {
			keyword: '',
			dataList: [],
			delIcon1:
				'',
			sarchIcon:
				'',
			pageNo: 1
		};
	},
	props: {
		placeholder: {
			value: String,
			default: '请输入搜索内容'
		},
		borderColor: {
			value: String,
			default: '#2796f2'
		},
		textColor: {
			value: String,
			default: '#2796f2'
		},
		searchName: {
			value: String,
			default: '搜索'
		}
	},
	methods: {
		search() {
			if (this.keyword == '') {
				this.dataList = [];
			} else {
				this.loadData(this.keyword);
			}
		},
		clearKeyword() {
			this.keyword = '';
		},
		loadData(names) {
			this.$http
				.post(
					'hot_crew/lists',
					{
						pageNo: this.pageNo,
						pageSize: 50,
						name: names,
						sort_order: '',
						exchange_ids: this.$store.state.userInfo.exchange_ids,
						token: this.$store.state.userInfo.token
					},
					{
						load: false
					}
				)
				.then((res) => {
					this.dataList = res.data;
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.search-panel {
	padding: 10rpx 20rpx;
	background-color: #ffffff;
	.search-panel-base {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			flex: 1;
			height: 60rpx;
			background-color: #e8e8e8;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			border: 1rpx solid #f2f2f2;

			.search-icon {
				flex: none;
				width: 30rpx;
				height: 30rpx;
			}

			.search-input {
				flex: 1;
				height: 100%;
				padding: 0 20rpx;
			}

			.search-del-icon {
				width: 35rpx;
				height: 35rpx;
			}
		}

		.right {
			margin-left: 30rpx;
			height: 60rpx;
			line-height: 60rpx;

			.search-btn {
				border-radius: 30rpx;
				padding: 5rpx 18rpx;
			}
		}
	}

	.search-panel-more {
		.search-more-title {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 600;
			font-size: 26rpx;
			margin-bottom: 20rpx;

			.search-keyword-operate-icon {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.search-null {
			text-align: center;
			color: #8799a3;
		}

		.search-keywords {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.search-keyword {
				line-height: 55rpx;
				background-color: #e8e8e8;
				padding: 0rpx 30rpx;
				border-radius: 30rpx;
				margin: 10rpx 25rpx 15rpx 0;
				color: #8799a3;
			}
		}
	}
}
</style>
